<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>QQTIM宣传页</title>
    <link rel="stylesheet" href="css/index.css">
    <!--[if ite IE 8]-->
    <script src="js/html5shiv.min.js"></script>
    <!--[endif]-->
</head>
<body>
    <!-- 导航 -->
    <nav class="qq_nav">
        <div class="wrapper">
            <a href="#" class="logo"></a>
            <ul class="nav">
                <li><a class="active" href="#">首页</a></li>
                <li><a href="#">下载</a></li>
                <li><a href="#">动态</a></li>
            </ul>
            <!--<a href="#" class="register">注册</a>-->
            <div class="other">
                <ul>
                    <!-- 由于float:right的原因这边的顺序也得调换一下 -->
                    <li><a href="#">qq会员</a></li>
                    <li><a href="#">qq安全</a></li>
                    <li><a href="#">登录</a></li>
                </ul>
                <span>当前在线人数：227,763,015</span>
            </div>
            <a href="#" class="register">注册</a>  <!-- 先写float:right的更靠右边，所以这边调一下位置，将 注册 往后写 -->
        </div>
    </nav>
    <!-- 展示 -->
    <section class="qq_banner">
        <img src="images/banner-logo.png" alt="">
        <img src="images/banner-download.png" alt="">
        <img src="images/banner-list.png" alt="">
        <img src="images/banner-product.png" alt="">
    </section>
    <!-- 语音 -->
    <section class="qq_sound">
        <!-- seo优化 给搜索引擎看的-->
        <h1>I'm QQ - 每一天，乐在沟通</h1>
        <div class="bg" data-stellar-background-ratio="0.3"></div>
        <div class="content">
            <div class="iphone"></div>
            <h2>沟通，是跨越<br>千山万水的亲切声音</h2>
            <p>无论何时何地，你都能自由享受QQ在各类<br>终端上带来的高清通话，与好友一起想聊多久聊多久</p>
        </div>
    </section>
    <!-- 文件 -->
    <section class="qq_file">
        <div class="bg" data-stellar-background-ratio="0.3"></div>
        <div class="content">
            <h2>沟通，是随时随地<br>爽收快发</h2>
            <p>通过QQ，电脑和手机上的文件都能收发自如，<br>更有手机在线查阅，轻松你的工作和生活。</p>
            <div class="mac"></div>
        </div>
    </section>
    <!-- 兴趣 -->
    <section class="qq_interest">
        <div class="bg" data-stellar-background-ratio="0.3"></div>
        <div class="content">
            <div class="phone"></div>
            <h2>沟通，是志同道合<br>的他们放肆青春</h2>
            <p>即使世界很大，你也不会孤单，在兴趣部落<br>有和你一样的人，期待着和你一起发现精彩，</p>
        </div>
    </section>
    <!-- 底部 -->
    <section class="qq_footer">
        <div class="content">
            <div class="plats">
                <a class="plmb" href="#" target="_blank">QQ 手机版</a>
                <a class="plpc" href="#" target="_blank">QQ PC版</a>
                <a class="plmac" href="#" target="_blank">QQ Mac版</a>
                <a class="plpad" href="#" target="_blank">QQ Pad版</a>
            </div>
            <p>Copyright @ 1998-  2017 Tencent. All Rights Reserved.</p>
            <p>腾讯公司 版权所有</p>
        </div>
    </section>
    <script src="js/jquery.min.js"></script>
    <script src="js/jquery.stellar.js"></script>
    <script src="js/index.js"></script>
</body>
</html>